<template>
  <view>
    <!-- :class="[!isChild ? 'border-b-1 border-b-solid pb-4 border-[#EDEDED]' : '']" -->
    <view v-for="(item, index) in data" :key="index">
      <view class="flex pt-4 mb-2">
        <wd-img :src="item.avatar" :width="styles.avatarSize" :height="styles.avatarSize" :round="true"></wd-img>
        <view class="flex-1 flex flex-col ml-2">
          <text class="text-[#9A9A9A] text-[26rpx]">{{ item.nickname }}</text>
          <view class="text-base text-md my-[6rpx]">
            <text v-if="isChild">
              <text class="mr-2">回复</text>
              <text class="text-[#9A9A9A]">{{ item.reply.nickname }}：</text>
            </text>
            <text>{{ item.comment }}</text>
          </view>

          <view class="text-sm">
            <text class="text-[#9A9A9A]">{{ item.create_time }}</text>
            <text class="text-[#434343] ml-[20rpx]" @click="handleRecover(item)">回复</text>
          </view>

          <review-list v-if="item.showReview && item.children && item.children.length > 0" :data="item.children"
            :isChild="true" @recover="handleRecover"></review-list>

        </view>

      </view>



      <wd-divider v-if="!isChild" content-position="left">
        <view class="flex justify-center items-center text-sm text-[#9a9a9a]" @click="openReview(item, index)">
          <text class="mr-[4rpx]">{{ item.showReview ? '收起回复' : '展开回复' }}</text>
          <wd-icon :name="item.showReview ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#9a9a9a" />
        </view>
      </wd-divider>
    </view>

  </view>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  isChild: {
    type: Boolean,
    default: false
  },

});


const emit = defineEmits(['recover', 'open']);

const styles = computed(() => {
  return {
    avatarSize: props.isChild ? '36rpx' : '66rpx'
  }
})

function openReview(item, index) {
  emit('open', { item, index });
}

function handleRecover(item) {
  emit('recover', item);
}

</script>

<style lang="scss" scoped></style>
